<template>
  <div style="margin-left: 20px">
    <el-table :data="data">
      <el-table-column v-for="(item,index) in columns" :key="index" :prop="item.key"
                       :label="item.title" :formatter="item.formatter" :width="item.width" align="center">
        <template slot-scope="scope">
          <div v-if="item.operator">
            <template v-for="(o,key) in item.operator">
              <el-button :type="o.type" :key="key" @click="o.click(scope.row)"
                         size="small" v-if="!o.hidden || !o.hidden(scope.row)">{{o.name}}
              </el-button>
            </template>
          </div>
          <div v-else>
            <span v-if="!item.formatter">
              <template v-if="item.type">
                {{item.type=='date'?dateFormat(scope.row[item.key],"YYYY-MM-DD"):dateFormat(scope.row[item.key])}}
              </template>
              <template v-else>
                {{scope.row[item.key]}}
              </template>
            </span>
            <span v-else v-html="item.formatter(scope.row,item.key,scope.row[item.key],index)"></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="background-color: #ffffff;text-align: right;padding: 8px 0;">
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" :page-size="pageSize" :current-page="curPage" @prev-click="reload" @next-click="reload"
          @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ElementTable",
    data() {
      return {
        data: [],
        total: 0,
        curPage: 1
      }
    },
    props: {
      url: String,
      pageSize: Number,
      columns: Array
    },
    created() {
      if (!this.pageSize) {
        this.pageSize = 10;
      }
      this.reload(this.curPage);
    },
    methods: {
      reload() {
        if (!this.url) {
          return;
        }
        let that = this;
        this.$http.post(this.url, {"curPage": this.curPage, "size": this.pageSize}).then(res => {
          console.log(res.data.data.data);
          that.data = res.data.data.data;
          that.total = res.data.data.totals;
        });
      },
      deploy(row) {
        console.log(row)
      },
      open() {
        console.log("d")
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.curPage = val;
        this.reload();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.reload();
      },
    }
  }
</script>

<style scoped>

</style>
